/*
 * Simpletip component
*/

.simpletip-tooltip {
    background-color: var(--main-surface-primary);
    border-radius: var(--radius-i-xs);
    display: block;
    filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.13)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.14));
    font: var(--text-caption-md);
    max-width: 400px;
    opacity: 0;
    padding: 12px;
    position: absolute;
    text-align: center;
    transition: opacity 200ms ease-in-out 1s;
    transition-delay: 0.5s;
    z-index: 3000;
}

.simpletip-tooltip.visible {
    opacity: 1;
}

.simpletip-tooltip span {
    position: relative;
}

.simpletip-tooltip .tooltip-arrow {
    height: 2px;
    position: absolute;
    width: 2px;
}

.simpletip-tooltip .tooltip-arrow::before {
    content: '';
    background-color: var(--main-surface-primary);
    border-radius: 2px;
    display: block;
    height: 12px;
    left: calc(50% - 6px);
    position: absolute;
    top: calc(50% - 6px);
    transform: rotate(45deg);
    width: 12px;
}
